<template>
  <div>
    <el-card>
      <div slot="header">
        <span>发布新赛事</span>
      </div>
      <div>
        <el-form :model="eventForm" :rules="rules" ref="eventForm" label-width="100px">
          <el-form-item label="赛事名称" prop="name">
            <el-input v-model="eventForm.name"></el-input>
          </el-form-item>
          <el-form-item label="比赛时间" prop="time">
            <el-date-picker
  v-model="eventForm.time"
  type="datetime"
  placeholder="选择日期时间"
  value-format="yyyy-MM-dd HH:mm:ss"
  format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
          </el-form-item>
          <el-form-item label="比赛地点" prop="location">
            <el-input v-model="eventForm.location"></el-input>
          </el-form-item>
          <el-form-item label="赛事描述" prop="description">
            <el-input type="textarea" v-model="eventForm.description"></el-input>
          </el-form-item>
          <el-form-item label="比赛规则" prop="rules">
            <el-input type="textarea" v-model="eventForm.rules"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="submitForm('eventForm')">发布赛事</el-button>
            <el-button @click="resetForm('eventForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      eventForm: {
        name: '',
        time: '',
        location: '',
        description: '',
        rules: ''
      },
      rules: {
        name: [{ required: true, message: '请输入赛事名称', trigger: 'blur' }],
        time: [{ required: true, message: '请选择比赛时间', trigger: 'change' }],
        location: [{ required: true, message: '请输入比赛地点', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = {
            eventName: this.eventForm.name,
            eventTime: this.eventForm.time,
            location: this.eventForm.location,
            description: this.eventForm.description,
            rules: this.eventForm.rules,
            status: "upcoming" // 默认状态
          };
          
          axios.post(`http://localhost:10086/organizer/publishEvent?organizerId=${this.$store.state.userId}`, formData)
            .then(response => {
              if (response.data.code === 200) {
                this.$message.success('赛事发布成功');
                this.resetForm(formName);
              } else {
                this.$message.error('赛事发布失败: ' + (response.data.message || '未知错误'));
              }
            })
            .catch(error => {
              this.$message.error('赛事发布失败: ' + (error.response?.data?.message || error.message || '未知错误'));
              console.error('发布赛事错误:', error);
            });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.eventForm = {
        name: '',
        time: '',
        location: '',
        description: '',
        rules: ''
      };
    }
  }
}
</script>

<style>
.el-button--success {
  background-color: #67C23A;
  border-color: #67C23A;
}
</style>